<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态Prop</title>
    <script src="../js/vue-dev.js"></script>
</head>
<body>
    <div id="app_prop">
        <p>在父组件中声明自己的data，子组件通过显示的props来声明自己希望得到的来自父组件的数据</p>
        <input v-model="modelMessage" placeholder="Please edit me ">
        <br>
        显示的内容为：
        <child v-bind:component-message="modelMessage"></child>


    </div>
    <script>

        //注册全局组件
        Vue.component('child',{
            //显示的声明子组件希望得到的数据
//            props:['component-message'],
            props:['componentMessage'],
            //就像data一样，prop可以使用在模板内，
            //同样可以在vm实例中，像“this.message”这样使用
            template:'<span>{{componentMessage}}</span>'
        });


        var app_prop = new Vue({
            el:'#app_prop',
            data:{
                modelMessage:''
            }
        })

    </script>



</body>
</html>